<template>
  <el-container>
    <el-header style="background-color: #000000;">请填写相关请假信息</el-header>
    <br><br><br>
    <el-form ref="form" :model="vacation" label-width="100px">
      <el-form-item label="差假类型" size="medium">
        <el-select v-model="vacation.vacationWay" placeholder="请选择差假类型">
          <el-option label="出差" value="出差"></el-option>
          <el-option label="事假" value="事假"></el-option>
          <el-option label="加班" value="加班"></el-option>
          <el-option label="调休" value="调休"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="开始时间" size="medium">
        <el-date-picker v-model="vacation.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
          formate="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="结束时间" size="medium">
        <el-date-picker v-model="vacation.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
          formate="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="起始地点" size="medium">
        <el-col :span="10">
          <el-input placeholder="请填写起始地点" v-model="vacation.vacationOrigin"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="终止地点" size="medium">
        <el-col :span="10">
          <el-input placeholder="请填写终止地点" v-model="vacation.vacationDestination"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="交通方式" size="medium">
        <el-select v-model="vacation.vacationTool" placeholder="请选择交通方式">
          <el-option label="无" value="无"></el-option>
          <el-option label="打车" value="打车"></el-option>
          <el-option label="地铁" value="地铁"></el-option>
          <el-option label="高铁" value="高铁"></el-option>
          <el-option label="飞机" value="飞机"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="预支费用" size="medium">
        <el-col :span="10">
          <el-input placeholder="请填写预支费用" v-model="vacation.vacationExpense"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="事由">
        <el-input type="textarea" placeholder="请填写具体事由" v-model="vacation.vacationContent"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>返回首页</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        vacation: {
          userId: 0,
          startTime: "",
          endTime: "",
          vacationWay: "",
          vacationContent: "",
          vacationOrigin: "",
          vacationDestination: "",
          vacationTool: "",
          vacationExpense: ""
        },
        user: {
          userId: 0,
        }
      }
    },
    methods: {
      onSubmit() {
        this.vacation.userId=this.user.userId;
        console.log(this.vacation);
        this.$confirm("你确定要提交吗", "提示")
          .then(() => {
            var self = this;
            this.$http.get("http://localhost:8080/vacation/addVacation", {
                params: this.vacation
              })
              .then(function(rs) {
                self.$message(rs.data.info);
                if (rs.data.success) {
                  this.vacation=null;
                }
              })
          })
          .catch(() => {
            this.$message('您已取消操作');
          })
      }
    },
    mounted() {
      //把字符串转化成对象
      var u = JSON.parse(sessionStorage.getItem("user"));
      console.log(u);
      this.user = u;
      console.log(this.user);
    }
  }
</script>

<style>
</style>
